<template>
  <div :class="classes">
    <Button
      v-if="back"
      type="secondary"
      icon="arrow-left"
      size="small"
      class="haloe-breadcrumb-btn-back"
      @click="backBtnClick"
    ></Button>
    <slot></slot>
  </div>
</template>
<script>
import Button from '../button/button.vue'
const prefixCls = 'haloe-breadcrumb'
export default {
  name: 'Breadcrumb',
  components: { Button},
  provide () {
    return {
      BreadcrumbInstance: this
    }
  },
  emits: ['backBtnClick'],
  props: {
    separator: {
      type: String,
      default: '/'
    },
    back: {
      typeof: Boolean,
      default: false
    }
  },
  computed: {
    classes() {
      return [
        `${prefixCls}`,
        {
          [`${prefixCls}-back`]: this.back
        },
      ]
    },
  },
  methods: {
    backBtnClick() {
      this.$emit('backBtnClick')
    }
  }
};
</script>
